<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">

</head>

<body>
    <!-- 顶部导航 -->
    <div class="topnav">
        <div class="container">
            welcome to music shop！！！
            <span>
                <a href="">168-8888-88888 </a>
                <a href="">123456789@qq.com</a>
            </span>
        </div>
    </div>
    <!-- 主导航 -->
    <header class="container cf">
        <a href="./index.html">
            <img class="logo" src="./images/logo.png">
        </a>
        <nav>
            <a href="index.html">HOME</a>
            <a href="aboutus.html">ABOUTUS</a>
            <a href="#">DETAILS</a>
            <a href="#">NEWS</a>
            <a href="message.html">OnlineMessage</a>
            <a href="contactus.html">ContactUs</a>
        </nav>
    </header>
    <!-- 横幅 -->
    <div class="banner">
        <a href="#">
            <img src="https://www.musicshopeurope.com/content/files/1200x558%20Be%20Inspired%20By%20Music[12].png">
        </a>
    </div>
    <!-- 介绍 -->
    <section class="prodesc container">
        <ul class="desclist cf">
            <li>
                <a href="#">
                    <h1>superior quality</h1>
                </a>
            </li>
            <li>
                <a href="#">
                    <h1>Excellent group</h1>
                </a>
            </li>
            <li>
                <a href="#">
                    <h1>Excellent source of imports</h1>
                </a>
            </li>
        </ul>
    </section >

    <section class="container">
    	
    		<video width="1200" height="480" controls>
  				<source src="http://home.ustc.edu.cn/~yunju/video/music.mp4" type="video/mp4">
<!--   				<source src="movie.ogg" type="video/ogg">
 				 <source src="movie.webm" type="video/webm"> -->
 			<!-- 	<object data="movie.mp4" width="320" height="240">
    				<embed src="http://home.ustc.edu.cn/~yunju/video/dog.mp4" width="320" height="240">
  				</object> -->
			</video>
    </section>
    <!-- 产品展示 -->
    <section class="container proreveal cf">
        <h1>OUR PRODUCTS</h1>
        <ul>
            <li class="l">
                <img src="http://img7.peiyinxiu.com/202101261036f51445090ebb29cc.jpg">
                <a href="#">
                    <h2>The river</h2>
                    <p>RIVER</p>
                </a>
            </li>
            <li class="l">
                <img src="http://img7.peiyinxiu.com/202101261036e97444bb0c1bbb3b.jpg">
                <a href="#">
                    <h2>The flower</h2>
                    <p>FLOWER</p>
                </a>
            </li>
            <li class="r">
                <img src="http://img7.peiyinxiu.com/202101261036b304badb5cf2982f.jpg">
                <a href="#">
                    <h2>The witter</h2>
                    <p>WITTER</p>
                    <button type="submit">READ MORE</button>
                </a>
            </li>
            <li class="l">
                <img src="http://img7.peiyinxiu.com/2021012610360c141f19e21aa91e.jpg">
                <a href="#">
                    <h2>The autumn</h2>
                    <p>AUTUMN</p>
                </a>
            </li>
            <li class="l">
                <img src="http://img7.peiyinxiu.com/2021012610377e746fcbac77c8fd.jpg">
                <a href="#">
                    <h2>The mountain</h2>
                    <p>MOUNTAIN</p>
                </a>
            </li>
        </ul>
    </section>

    <!-- 关于我们 -->
    <section class="aboutwe">
        <div class="container aboutwe_main">
            <h1>ABOUTUS</h1>
            <p>Welcome to Music Shop China - the online store for sheet music, gifts and music accessories. Covering all styles of music, for every instrument and every level of difficulty, Music Shop Europe aims to serve every music maker!</p>
            <button type="button">READ MORE</button>
        </div>
    </section>

    <!-- 底部导航 -->
    <footer>
        <div class="container cf">
            <!-- 地址联系方式 -->
            <div class="footer_left fl">
                <img src="./images/logo.png">
                <p>58 Xinhua West Street, Tongzhou District, Beijing</p>
                <p>138-8888-88888 / (010)-80575858</p>
                <p>12385967891@gmail.com</p>
            </div>
            <!-- 快速链接 -->
            <div class="footer_middle fl">
                <h2>Navigation links</h2>
                <ul class="linklist">
                    <li>
                        <a href="#">>Home</a>
                    </li>
                    <li>
                        <a href="#">>About us</a>
                    </li>
                    <li>
                        <a href="#">>Albums</a>
                    </li>
                    <li>
                        <a href="#">>News</a>
                    </li>
                    <li>
                        <a href="#">>Message</a>
                    </li>
                    <li>
                        <a href="#">>Contact</a>
                    </li>
                    <li></li>
                </ul>
            </div>
            <!-- 搜索 -->
            <div class="footer_bottom fl">
                <h2>Search</h2>
                <form class="search" action="#" method="GET">
                    <input type="text" placeholder="keywords">
                    <button type="submit">Search</button>
                    <p>
                        <a href="">Follow us</a>
                    </p>
                </form>
            </div>
        </div>
        <div class="bottom_nav">
            <p>Copyright © 2020-2021,music.map.cn, All rights reserved ICP no.1002548. No reprint is allowed without permission/p>
        </div>
    </footer>
    <!-- 回到顶部 -->
    <div id="gotop">
        <img src="./images/回到顶部.jpeg" alt="">
    </div>
    <script src="./js/common.js"></script>
</body>

</html>